// 导入Sass模块
// 导入样式文件
@import './variables.scss';
@import './reset.scss';
@import './common.scss';
@import './components.scss';
@import './animations.scss';

// Element Plus 主题定制
:root {
  // 主色调
  --el-color-primary: #{$primary-color};
  --el-color-primary-light-3: #{lighten($primary-color, 30%)};
  --el-color-primary-light-5: #{lighten($primary-color, 50%)};
  --el-color-primary-light-7: #{lighten($primary-color, 70%)};
  --el-color-primary-light-8: #{lighten($primary-color, 80%)};
  --el-color-primary-light-9: #{lighten($primary-color, 90%)};
  --el-color-primary-dark-2: #{darken($primary-color, 20%)};
  
  // 成功色
  --el-color-success: #{$success-color};
  --el-color-success-light-3: #{lighten($success-color, 30%)};
  --el-color-success-light-5: #{lighten($success-color, 50%)};
  --el-color-success-light-7: #{lighten($success-color, 70%)};
  --el-color-success-light-8: #{lighten($success-color, 80%)};
  --el-color-success-light-9: #{lighten($success-color, 90%)};
  --el-color-success-dark-2: #{darken($success-color, 20%)};
  
  // 警告色
  --el-color-warning: #{$warning-color};
  --el-color-warning-light-3: #{lighten($warning-color, 30%)};
  --el-color-warning-light-5: #{lighten($warning-color, 50%)};
  --el-color-warning-light-7: #{lighten($warning-color, 70%)};
  --el-color-warning-light-8: #{lighten($warning-color, 80%)};
  --el-color-warning-light-9: #{lighten($warning-color, 90%)};
  --el-color-warning-dark-2: #{darken($warning-color, 20%)};
  
  // 危险色
  --el-color-danger: #{$danger-color};
  --el-color-danger-light-3: #{lighten($danger-color, 30%)};
  --el-color-danger-light-5: #{lighten($danger-color, 50%)};
  --el-color-danger-light-7: #{lighten($danger-color, 70%)};
  --el-color-danger-light-8: #{lighten($danger-color, 80%)};
  --el-color-danger-light-9: #{lighten($danger-color, 90%)};
  --el-color-danger-dark-2: #{darken($danger-color, 20%)};
  
  // 信息色
  --el-color-info: #{$info-color};
  --el-color-info-light-3: #{lighten($info-color, 30%)};
  --el-color-info-light-5: #{lighten($info-color, 50%)};
  --el-color-info-light-7: #{lighten($info-color, 70%)};
  --el-color-info-light-8: #{lighten($info-color, 80%)};
  --el-color-info-light-9: #{lighten($info-color, 90%)};
  --el-color-info-dark-2: #{darken($info-color, 20%)};
  
  // 边框圆角
  --el-border-radius-base: #{$border-radius};
  --el-border-radius-small: #{$border-radius-small};
  --el-border-radius-round: #{$border-radius-round};
  
  // 阴影
  --el-box-shadow-base: #{$box-shadow-base};
  --el-box-shadow-light: #{$box-shadow-light};
  --el-box-shadow-lighter: #{$box-shadow-lighter};
  --el-box-shadow-dark: #{$box-shadow-dark};
}

// 暗色主题
html.dark {
  --el-bg-color: #1a1a1a;
  --el-bg-color-page: #0a0a0a;
  --el-bg-color-overlay: #1d1e1f;
  --el-text-color-primary: #e5eaf3;
  --el-text-color-regular: #cfd3dc;
  --el-text-color-secondary: #a3a6ad;
  --el-text-color-placeholder: #8d9095;
  --el-text-color-disabled: #6c6e72;
  --el-border-color: #4c4d4f;
  --el-border-color-light: #414243;
  --el-border-color-lighter: #363637;
  --el-border-color-extra-light: #2b2b2c;
  --el-border-color-dark: #58585b;
  --el-border-color-darker: #636466;
  --el-fill-color: #303133;
  --el-fill-color-light: #262727;
  --el-fill-color-lighter: #1d1d1d;
  --el-fill-color-extra-light: #191919;
  --el-fill-color-dark: #39393a;
  --el-fill-color-darker: #424243;
  --el-fill-color-blank: transparent;
}

// 全局工具类
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

// 间距工具类
@for $i from 0 through 20 {
  .m-#{$i} {
    margin: #{$i * 4}px;
  }
  .mt-#{$i} {
    margin-top: #{$i * 4}px;
  }
  .mr-#{$i} {
    margin-right: #{$i * 4}px;
  }
  .mb-#{$i} {
    margin-bottom: #{$i * 4}px;
  }
  .ml-#{$i} {
    margin-left: #{$i * 4}px;
  }
  .mx-#{$i} {
    margin-left: #{$i * 4}px;
    margin-right: #{$i * 4}px;
  }
  .my-#{$i} {
    margin-top: #{$i * 4}px;
    margin-bottom: #{$i * 4}px;
  }
  
  .p-#{$i} {
    padding: #{$i * 4}px;
  }
  .pt-#{$i} {
    padding-top: #{$i * 4}px;
  }
  .pr-#{$i} {
    padding-right: #{$i * 4}px;
  }
  .pb-#{$i} {
    padding-bottom: #{$i * 4}px;
  }
  .pl-#{$i} {
    padding-left: #{$i * 4}px;
  }
  .px-#{$i} {
    padding-left: #{$i * 4}px;
    padding-right: #{$i * 4}px;
  }
  .py-#{$i} {
    padding-top: #{$i * 4}px;
    padding-bottom: #{$i * 4}px;
  }
}

// 响应式断点
@media (max-width: 768px) {
  .mobile-hidden {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .desktop-hidden {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .tablet-hidden {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .large-screen-hidden {
    display: none !important;
  }
}